<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    <span>登录</span>-->
<!--    <span>注册</span>-->
    <hr/>
    <div>
        <!--<loginForm></loginForm>-->
        <!--
            疑问：为什么不采用上面的写法？
            由于html是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform>
            所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式
         -->
<!--        <login-form></login-form>-->
<!--        <hr>-->
<!--        <register-form></register-form>-->

        <!--router-link来指定跳转的路径-->
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr>
        <div>
            <!--vue-router的锚点-->
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>
</div>



<script src="login.js"></script>
<script src="register.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>

    /*
    * 1、引入vue-router依赖
    * 2、定义路由规则   path:访问路径   component:访问对应的组件
    * 3、路由规则注册到VueRouter实例
    * 4、需要在vue中将router来进行注册
    * 5、需要定义锚点      <router-view>
    * */




    // 创建VueRouter对象
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const router =new VueRouter({
        routes:[// 编写路由规则
            {
                path:"/login",// 请求路径，以“/”开头
                component:loginForm// 组件名称
            },
            {
                path:"/register",
                component: registerForm
            }
        ]
    });





    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    var vm = new Vue({
        el:"#app",
        components: {// 引用登录和注册组件
            loginForm,
            registerForm
        },
        router// 引用上面定义的router对象
    });



</script>
</body>
</html>